<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String ctx = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + ctx + "/";
%>
<html>

<head>
    <title>Home</title>
    <!--css-->
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link href="/css/font-awesome.css" rel="stylesheet">
    <!--css-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <script type="application/x-javascript">
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <script src="/js/jquery.min.js"></script>
    <link href='http://fonts.useso.com/css?family=Cagliostro' rel='stylesheet' type='text/css'>
    <link href='http://fonts.useso.com/css?family=Open+Sans:400,800italic,800,700italic,700,600italic,600,400italic,300italic,300' rel='stylesheet' type='text/css'>
    <!--search jQuery-->
    <script src="/js/main.js"></script>
    <!--search jQuery-->
    <script src="/js/responsiveslides.min.js"></script>
    <script>
        $(function() {
            $("#slider").responsiveSlides({
                auto: true,
                nav: true,
                speed: 500,
                namespace: "callbacks",
                pager: true,
            });
        });
    </script>
    <!--mycart-->
    <script type="text/javascript" src="/js/bootstrap-3.1.1.min.js"></script>
    <!-- cart -->
    <script src="/js/simpleCart.min.js"></script>
    <!-- cart -->
    <!--start-rate-->
    <script src="/js/jstarbox.js"></script>
    <link rel="stylesheet" href="/css/jstarbox.css" type="text/css" media="screen" charset="utf-8" />
    <script type="text/javascript">
        jQuery(function() {
            jQuery('.starbox').each(function() {
                var starbox = jQuery(this);
                starbox.starbox({
                    average: starbox.attr('data-start-value'),
                    changeable: starbox.hasClass('unchangeable') ? false : starbox.hasClass('clickonce') ? 'once' : true,
                    ghosting: starbox.hasClass('ghosting'),
                    autoUpdateAverage: starbox.hasClass('autoupdate'),
                    buttons: starbox.hasClass('smooth') ? false : starbox.attr('data-button-count') || 5,
                    stars: starbox.attr('data-star-count') || 5
                }).bind('starbox-value-changed', function(event, value) {
                    if (starbox.hasClass('random')) {
                        var val = Math.random();
                        starbox.next().text(' ' + val);
                        return val;
                    }
                })
            });
        });
    </script>
    <!--//End-rate-->
</head>

<body>
<jsp:include page="topbar.jsp"/>
    <!--banner-->
    <div class="banner-w3">
        <div class="demo-1">
            <div id="example1" class="core-slider core-slider__carousel example_1">
                <div class="core-slider_viewport">
                    <div class="core-slider_list">
                        <div class="core-slider_item">
                            <img src="/images/b1.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="core-slider_item">
                            <img src="/images/b2.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="core-slider_item">
                            <img src="/images/b3.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="core-slider_item">
                            <img src="/images/b4.jpg" class="img-responsive" alt="">
                        </div>
                    </div>
                </div>
                <div class="core-slider_nav">
                    <div class="core-slider_arrow core-slider_arrow__right"></div>
                    <div class="core-slider_arrow core-slider_arrow__left"></div>
                </div>
                <div class="core-slider_control-nav"></div>
            </div>
        </div>
        <link href="/css/coreSlider.css" rel="stylesheet" type="text/css">
        <script src="/js/coreSlider.js"></script>
        <script>
            $('#example1').coreSlider({
                pauseOnHover: false,
                interval: 3000,
                controlNavEnabled: true
            });
        </script>

    </div>
    <!--banner-->
    <!--content-->
    <div class="content">
        <!--banner-bottom-->
        <div class="ban-bottom-w3l">
            <div class="container">
                <div class="col-md-6 ban-bottom">
                    <div class="ban-top">
                        <img src="/images/p1.png" class="img-responsive" alt="" />
                        <div class="ban-text">
                            <h4><a href="<%=ctx%>/Product/Show?goodsCategoryId=1">车</a></h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 ban-bottom3">
                    <div class="ban-top">
                        <img src="/images/p2.jpg" class="img-responsive" alt=""  />
                        <div class="ban-text1">
                            <h4><a href="<%=ctx%>/Product/Show?goodsCategoryId=7">礼物</a></h4>
                        </div>
                    </div>
                    <div class="ban-img">
                        <div class=" ban-bottom1">
                            <div class="ban-top">
                                <img src="/images/p3.jpeg" class="img-responsive" alt="" />
                                <div class="ban-text1">
                                    <h4><a href="<%=ctx%>/Product/Show?goodsCategoryId=4">办公设备</a> </h4>
                                </div>
                            </div>
                        </div>
                        <div class="ban-bottom2">
                            <div class="ban-top">
                                <img src="/images/p4.jpeg" class="img-responsive" alt="" />
                                <div class="ban-text1">
                                    <h4><a href="<%=ctx%>/Product/Show?goodsCategoryId=8">箱包鞋帽</a></h4>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <!--banner-bottom-->

        <div class="product-agile">
            <div class="container">
                <h3 class="tittle1"> 猜你喜欢</h3>
                <div class="slider">
                    <div class="callbacks_container">
                        <ul class="rslides" id="slider">
                            <li>
                                <div class="caption">
                                    <c:forEach items="${allGoods}" var="goodsList" >
                                        <div class="col-md-3 cap-left simpleCart_shelfItem">
                                            <div class="grid-arr">
                                                <div class="grid-arrival">
                                                    <figure>
                                                        <a href="detail.html">
                                                            <div class="grid-img">
                                                                <img src="${goodsList. goodsImg}" class="img-responsive" alt="">
                                                            </div>

                                                        </a>
                                                    </figure>
                                                </div>
                                                <div class="block">
                                                    <div class="starbox small ghosting"> </div>
                                                </div>
                                                <div class="women">
                                                    <h6><a href="detail.html">${goodsList.goodsName}</a></h6>
                                                    <span class="size">简介</span>
                                                    <p><em class="item_price">${goodsList.goodsPrice}</em></p>
                                                    <a href="<%=ctx%>/Order/orderDetail?goodsId=${goodsList.goodsId}" data-text="Add To Cart" class="my-cart-b item_add">加入购物车</a>
                                                </div>
                                            </div>
                                        </div>
                                    </c:forEach>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--Products-->
        <div class="latest-w3">
            <div class="container">
                <h3 class="tittle1">更多分类</h3>
                <div class="latest-grids">
                    <div class="col-md-4 latest-grid">
                        <div class="latest-top">
                            <img src="/images/l1.jpeg" class="img-responsive" alt="">
                            <div class="latest-text">
                                <h4><a href="<%=ctx%>/Product/Show?goodsCategoryId=2">手机/电脑</a></h4>
                            </div>

                        </div>
                    </div>
                    <div class="col-md-4 latest-grid">
                        <div class="latest-top">
                            <img src="/images/l2.jpeg" class="img-responsive" alt="">
                            <div class="latest-text">
                                <h4> <a href="<%=ctx%>/Product/Show?goodsCategoryId=3">乐器</a></h4>
                            </div>

                        </div>
                    </div>
                    <div class="col-md-4 latest-grid">
                        <div class="latest-top">
                            <img src="/images/l3.jpeg" class="img-responsive" alt="">
                            <div class="latest-text">
                                <h4><a href="<%=ctx%>/Product/Show?goodsCategoryId=4">办公用品</a></h4>
                            </div>

                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="latest-grids">
                    <div class="col-md-4 latest-grid">
                        <div class="latest-top">
                            <img src="/images/l4.jpeg" class="img-responsive" alt="">
                            <div class="latest-text">
                                <h4>图书/音像</h4>
                            </div>

                        </div>
                    </div>
                    <div class="col-md-4 latest-grid">
                        <div class="latest-top">
                            <img src="/images/l5.jpeg" class="img-responsive" alt="">
                            <div class="latest-text">
                                <h4>礼品/饰品</h4>
                            </div>

                        </div>
                    </div>
                    <div class="col-md-4 latest-grid">
                        <div class="latest-top">
                            <img src="/images/l6.jpeg" class="img-responsive" alt="">
                            <div class="latest-text">
                                <h4>箱包/鞋帽</h4>
                            </div>

                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <!--new-arrivals-->
    </div>
    <!--content-->
    <!---footer--->
    <div class="footer-w3l">
        <div class="container">
            <div class="footer-grids">
                <div class="col-md-3 footer-grid">
                    <h4>关于 </h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="social-icon">
                        <a href="#"><i class="icon"></i></a>
                        <a href="#"><i class="icon1"></i></a>
                        <a href="#"><i class="icon2"></i></a>
                        <a href="#"><i class="icon3"></i></a>
                    </div>
                </div>
                <div class="col-md-3 footer-grid">
                    <h4>我的账户</h4>
                    <ul>
                        <li><a href="login.html">登录</a></li>
                        <li><a href="register.html"> 创建账户 </a></li>
                    </ul>
                </div>
                <div class="col-md-3 footer-grid">
                    <h4>信息</h4>
                    <ul>
                        <li><a href="index.jsp">返回首页</a></li>
                        <li><a href="products.html">全部产品</a></li>
                    </ul>
                </div>
                <div class="col-md-3 footer-grid foot">
                    <h4>联系人</h4>
                    <ul>
                        <li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i><a href="#">地址：成都市高新区天益街</a></li>
                        <li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i><a href="#">电话：8208208820</a>
                        </li>
                        <li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:example@mail.com"> example@mail.com</a></li>
                    </ul>
                </div>
                <div class="clearfix"> </div>
            </div>

        </div>
    </div>
    <!---footer--->

</body>

</html>